import React, { forwardRef } from 'react'
import Search from '@material-ui/icons/Search';
import MaterialTable from 'material-table';
import AddBox from '@material-ui/icons/AddBox';
import ArrowUpward from '@material-ui/icons/ArrowUpward';
import Check from '@material-ui/icons/Check';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import ViewColumn from '@material-ui/icons/ViewColumn';
import { is_empty } from 'sui';
import { loc } from 'local/index.js';

const tableIcons = {
    Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
    Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
    Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
    DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
    Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
    Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
    FirstPage: forwardRef((props, ref) => <div className="text-base" {...props} ref={ref}>{loc("nui_9")}</div>),
    LastPage: forwardRef((props, ref) =><div className="text-base" {...props} ref={ref}>{loc("nui_10")}</div>),
    Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
    NextPage: forwardRef((props, ref) => <div className="text-base" {...props} ref={ref}>{loc("nui_14")}</div>),
    PreviousPage: forwardRef((props, ref) => <div className="text-base" {...props} ref={ref}>{loc("nui_13")}</div>),
    ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />),
    ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
    ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
};

/* col: [
 *   {title: '序号', field: 'index'},
 *   {title: '工单号', field: 'sn'},
 * ]
 *
 * row : [
 *   {index: '1', sn: "abc"},
 *   {index: '2', sn: "bcd"},
 * ]
*/
const MaTable = ({
    col,
    row,
    opt={},
    actions,
    paging=false,
    page=6,
    title="",
    search=false,
}) => {
    if (is_empty(col)) {
        return null;
    }

    const getRow = () => {
        if (is_empty(row)) {
            return [];
        }

        return row;
    };

    return (
        <MaterialTable
            icons={tableIcons}
            title={title}
            localization={{
                pagination: {
                    labelDisplayedRows: loc("nui_22"),
                    labelRowsSelect: loc("nui_11"),
                    firstAriaLabel: loc("nui_12"),
                    firstTooltip: loc("nui_12"),
                    previousAriaLabel: loc("nui_13"),
                    previousTooltip: loc("nui_13"),
                    nextAriaLabel: loc("nui_14"),
                    nextTooltip: loc("nui_14"),
                    lastAriaLabel: loc("nui_15"),
                    lastTooltip: loc("nui_15"),
                },
                body: {
                    emptyDataSourceMessage: "",
                    addTooltip: "添加",
                    deleteTooltip: "删除",
                    editTooltip: "编辑",
                    editRow: {
                        deleteText: "确定删除此行数据?",
                        cancelTooltip: "取消",
                        saveTooltip: "确定",
                    }
                },
                header: {
                    actions: "",
                },
                toolbar: {
                    searchTooltip: "在结果中搜索",
                    searchPlaceholder: "在结果中搜索",
                    exportTitle: "导出",
                    exportAriaLabel: "导出",
                    exportCSVName: "导出 CSV"
                }
            }}
            options={{
                draggable: false,
                search: search,
                paging: paging,
                showTitle: title ? true : false,
                toolbar: search,
                sorting: false,
                exportAllData: true,
                exportButton: false,
                pageSize: page,
                padding: "dense",
                initialPage: 0,
                pageSizeOptions: [4],
                ...opt
            }}
            columns={col}
            data={getRow()}
            actions={actions}
        />
    );
};

const MTable = ({
    col,
    row,
    hselect,
    hclick,
    hcsv,
    fn,
    detail,
    actions,
    exbt=true,
    paging=true,
    page=5,
    curpage=0,
    title="",
    opt={},
    search=true,
    sort=true,
    parent,
    pageopt=[5, 6, 7],
    editable,
}) => {
    if (is_empty(col)) {
        return null;
    }

    const hSelectionChange = (v) => {
        if (hselect) {
            hselect(v);
        }
    };

    const hRowClick = (e, v) => {
        if (hclick) {
            hclick(v);
        }
    };

    const getRow = () => {
        if (is_empty(row)) {
            return [];
        }

        return row;
    };

    return (
        <MaterialTable
            detailPanel={detail}
            icons={tableIcons}
            title={title}
            localization={{
                pagination: {
                    labelDisplayedRows: loc("nui_22"),
                    labelRowsSelect: loc("nui_11"),
                    firstAriaLabel: loc("nui_12"),
                    firstTooltip: loc("nui_12"),
                    previousAriaLabel: loc("nui_13"),
                    previousTooltip: loc("nui_13"),
                    nextAriaLabel: loc("nui_14"),
                    nextTooltip: loc("nui_14"),
                    lastAriaLabel: loc("nui_15"),
                    lastTooltip: loc("nui_15"),
                },
                body: {
                    emptyDataSourceMessage: "",
                    addTooltip: "添加",
                    deleteTooltip: "删除",
                    editTooltip: "编辑",
                    editRow: {
                        deleteText: "确定删除此行数据?",
                        cancelTooltip: "取消",
                        saveTooltip: "确定",
                    }
                },
                header: {
                    actions: "",
                },
                toolbar: {
                    searchTooltip: "在结果中搜索",
                    searchPlaceholder: "在结果中搜索",
                    exportTitle: "导出",
                    exportAriaLabel: "导出",
                    exportCSVName: "导出 CSV"
                }
            }}
            options={{
                draggable: false,
                search: search,
                paging: paging,
                showTitle: title ? true : false,
                sorting: sort,
                exportAllData: true,
                exportButton: false,
                exportCsv: hcsv,
                pageSize: page,
                initialPage: curpage,
                pageSizeOptions: pageopt,
                ...opt
            }}
            onSelectionChange={hSelectionChange}
            onRowClick={hRowClick}
            columns={col}
            data={getRow()}
            actions={actions}
            parentChildData={parent}
            editable={editable}
        />
    );
};

export {MTable, MaTable};
